<template>
  <div>
    <el-container>
      <el-main>
        <el-card class="box-card" style="margin-top:5px;height: 50px">
          <div slot="header" class="clearfix" style="height: 30px;">
            <span style="float:left;margin-top: -10px;height: 30px">我的评论（{{this.total}}）</span>
          </div>
        </el-card>
<!--具体评论-->
        <el-card class="box-card"  v-for="o in this.commentAndTopicList" :key="index" style="height: 210px">
          <div style="float: left;margin-top: -5px;margin-left: 5px;width: 900px;" >
            <el-link target="_blank" @click="showTopicBtn(o.topicId)" style="font-size: 16px;float: left">题目：
              <span style="font-weight:bold ;">{{ o.topicContent }}</span>
            </el-link>
          </div>
          <div style="margin-top: 10px">
            <!--头像昵称评论时间-->
            <div style="height: 80px;width: 300px;margin-top: 15px">
              <!--头像-->
              <el-col :span="2">
                <div class="demo-basic--circle">
                  <div class="block"><el-avatar :size="50" :src="circleUrl"></el-avatar></div>
                </div>
              </el-col>
              <!--昵称-->
              <div style="font-size: 18px;float:left;margin-top: -5px;margin-left: 35px">
<!--                {{o.userId}}-->我
              </div>
              <!--评论时间-->
              <div style="font-size: 2px;float:right;margin-right: 120px;margin-top: -15px">
                {{o.time}}
              </div>
            </div>
            <!--具体评论-->
            <div style="float: left;margin-top: -5px;margin-left: -80px;width: 900px;" >
              <span style="height: 100px;margin-left: 60px;float:left;font-weight: bold" >
<!--                具体具体具体具体具体(最多51个汉字)-->
                {{o.commentContent}}
              </span>
            </div>
            <!--点赞-->
            <div style="float: left;margin-top: -10px;width: 200px;margin-left: -880px">
              <i class="el-icon-thumb" style="float: left;margin-top: 60px;margin-left: 40px">
                <span style="font-size: 10px;margin-left: 5px;">(点赞功能暂未开放)</span>
              </i>
            </div>
            <div style="float: left;margin-top: 38px;width: 200px;margin-left: -750px">
              <span style="font-size: 10px;margin-left: 5px;">回复(暂未开放)</span>
            </div>
            <div style="float: right;margin-top: 60px;width: 250px;margin-right: -230px">
              <span style="font-size: 10px;margin-left: 5px;">
                <el-link target="_blank" @click="deleteComment(o.commentId)" style="font-size: 5px;float: left;color: #F56C6C">
                  删除
                </el-link>
              </span>
            </div>
          </div>
        </el-card>
        <!--分页组件-->
        <div class="block" v-show="showPagination" style="float:left;margin-left: 200px">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNo"
              :page-sizes="[3, 5]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "userCenter-myComment",
  data(){
    return{
      showPagination:true,
      pageNo: 1, //当前页数
      pageSize: 3, //显示条数
      total: 0, //总条数
      commentAndTopicList:[{
        topicContent:'',
        commentId:'',
        topicId:'',
        userId:'',
        time:'',
        commentContent:''
      }]
    }
  },
  methods:{
    //分页相关
    handleSizeChange(val) {
      this.pageSize=val;
      this.pageNo=1;//当切换一页显示几个的时候，我们要把页码切换第一页
      this.getAllComment();
      //console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.pageNo=val;
      this.getAllComment();
      //console.log(`当前页: ${val}`);
    },
    //获取当前用户的所有评论(按时间排序)
    getAllComment(){
      this.$myAxios('/userCenter/getUserAllCommentJ','post',{
        pageNo:(this.pageNo - 1) * this.pageSize,
        pageSize:this.pageSize
      },resp=> {
        console.log(resp);
        this.commentAndTopicList=resp.data.data.commentAndTopicList;
        this.total=resp.data.data.total;
        if(this.commentAndTopicList.length==0){ //不显示分页
          this.showPagination=false;
        }
      })
    },
    //点击题目触发
    showTopicBtn(id){
      //跳转页面到详细题目页面，将题目id传过去
      let routeData = this.$router.resolve({
        path: "/showTopic",
        query: {
          id:id
        }
      });
      //必要操作，否则不会打开新页面
      window.open(routeData.href, '_blank');
    },
    //删除评论
    deleteComment(commentId){
      this.$myAxios('/userCenter/deleteMyCommentJ','post',{id:commentId},resp=>{
        this.getAllComment();//相当于刷新页面
        this.$message({
          type: 'success',
          message: '删除评论成功!'
        });
      })
    }
  },
  created() {
    this.getAllComment();
  }
}
</script>

<style scoped>
.el-main {
  color: #333;
  text-align: center;
  line-height: 40px;
}
</style>